<script setup>
import {ref} from 'vue';
import NOption from "./NOption.vue";

const isClicked = ref(false);

const handleClick = () => {
  isClicked.value = true; // 更改背景颜色和字体颜色
};
</script>

<template>
  <div id="MissionUp">
    <el-row>
      <!-- 左边 -->
      <el-col :span="6" class="leftWin">
        <div>
          <!-- 头部：标题 -->
          <div style="font-weight: bold;margin-top: 5px;margin-left: 3px;">
            Missions
          </div>

          <hr>

          <!-- 主体：任务名称 -->
          <div
              class="MissionName"
              :class="{ 'clicked': isClicked }"
              @click="handleClick"
          >
            Mission: &lt;name&gt;
          </div>
        </div>
      </el-col>

      <!--    穿梭框-->
      <el-col :span="18" class="NOption">
        <NOption/>
      </el-col>


    </el-row>
  </div>

</template>

<style>
.leftWin, .NOption {
  color: white;
  height: 122px;
  font-size: 10px;
}

.leftWin {
  border: 1px solid white;

}

.MissionName {
  text-align: center;
  margin-top: -6px;
  font-size: 10px;
}

.MissionName:hover {
  background-color: #5c5c5c;
}

.MissionName.clicked {
  color: #86d586;
}

</style>
